<template>
  <div class="main" id="videoContain">
    <video id="videoDom" class="video-js vjs-default-skin" autoplay controls></video>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import videoJs from 'video.js'

const props = defineProps({
  urlVideo: {
    type: String,
    default: ''
  }
})

const player = ref()

const videoOption = ref({})

const playVideo = () => {
  player.value.play()
}

const pauseVideo = () => {
  player.value.pause()
}

const destroyedVideo = () => {
  if (player.value) {
    player.value.dispose()
  }
}

const changeVideoUrl = (src: string) => {
  let videoContain: any = document.getElementById('videoContain')
  destroyedVideo()
  videoContain.innerHTML = '<video id="videoDom" class="video-js vjs-default-skin" autoplay controls></video>'
  init(src)
}
const init = (src?: string) => {
  videoOption.value = {
    sources: [
      {
        src: src || props.urlVideo
      }
    ]
  }
  player.value = videoJs(document.getElementById('videoDom') as Element, videoOption.value)
}

onMounted(() => {
  init()
})

onUnmounted(() => {
  destroyedVideo()
})

defineExpose({ pauseVideo, playVideo, changeVideoUrl })
</script>

<style lang="scss" scoped>
:deep(.video-js) {
  width: 100%;
  height: 50vh;
}
</style>
